<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧医疗系统 - 管理端</title>
    <style>
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background: #f8f9fa;
            border-bottom: 1px solid #ddd;
            height: 60px;
        }

        .user-info {
            text-align: right;
            color: #333;
        }

        .user-info span {
            margin-left: 10px;
            font-weight: bold;
        }

        .container {
            width: 100%;
            height: calc(100vh - 60px);
            display: flex;
        }

        .sidebar {
            width: 200px;
            background: #333;
            padding: 20px;
            color: white;
        }

        .sidebar h2 {
            color: white;
            margin-bottom: 20px;
        }

        .menu-item {
            padding: 10px;
            cursor: pointer;
            margin-bottom: 5px;
        }

        .menu-item:hover {
            background: #444;
        }

        .main-content {
            flex: 1;
            padding: 20px;
        }

        .content-section {
            display: none;
        }

        .content-section.active {
            display: block;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 15px;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f5f5f5;
        }

        .btn {
            padding: 6px 12px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 5px;
        }

        .btn-danger {
            background-color: #f44336;
        }

        .form-input {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .btn-secondary {
            background-color: #6c757d;
        }

        .action-bar {
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="logo">
            <img src="/front_code/assets/out.gif" alt="网站Logo">
        </div>
        <div class="user-info">
            管理员：<span id="adminName">王管理</span>
            <br>
            工号：<span id="adminId">A789012</span>
            <br>
            <button class="btn btn-secondary" onclick="logout()">退出登录</button>
        </div>
    </div>
    <div class="container">
        <div class="sidebar">
            <h2>管理端</h2>
            <div class="menu-item" onclick="showSection('users')">用户账号管理</div>
            <div class="menu-item" onclick="showSection('schedule')">排班管理</div>
            <div class="menu-item" onclick="showSection('departments')">科室管理</div>
            <div class="menu-item" onclick="showSection('equipment')">设备管理</div>
            <div class="menu-item" onclick="showSection('appointments')">挂号订单管理</div>
            <div class="menu-item" onclick="showSection('reports')">患者报告管理</div>
        </div>

        <div class="main-content">
            <div id="users" class="content-section">
                <h2>用户账号管理</h2>
                <table>
                    <thead>
                        <tr>
                            <th>账号ID</th>
                            <th>用户类型</th>
                            <th>姓名</th>
                            <th>手机号</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-if="adminlist.length === 0 && doctorlist.length === 0 && patientlist.length === 0">
                            <td colspan="5">
                                <label style="color: grey;">暂时没有用户信息</label>
                            </td>
                        </tr>
                        <tr v-for="admin in adminlist" :key="admin.adminId">
                            <td>{{ admin.adminId }}</td>
                            <td>管理员</td>
                            <td>{{ admin.adminName }}</td>
                            <td>null</td>
                            <td>
                                <button class="btn">编辑</button>
                                <button class="btn btn-danger" @click="confirmDeleteAdmin(admin.adminId)">删除</button>
                            </td>
                        </tr>
                        <tr v-for="doctor in doctorlist" :key="doctor.doctorId">
                            <td>{{ doctor.doctorId }}</td>
                            <td>医生</td>
                            <td>{{ doctor.doctorName }}</td>
                            <td>null</td>
                            <td>
                                <button class="btn">编辑</button>
                                <button class="btn btn-danger" @click="confirmDeleteDoctor(doctor.doctorId)">删除</button>
                            </td>
                        </tr>
                        <tr v-for="patient in patientlist" :key="patient.patientId">
                            <td>{{ patient.patientId }}</td>
                            <td>患者</td>
                            <td>{{ patient.patientName }}</td>
                            <td>{{ patient.patientTel }}</td>
                            <td>
                                <button class="btn">编辑</button>
                                <button class="btn btn-danger"
                                    @click="confirmDeletePatient(patient.patientId)">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div id="schedule" class="content-section">
                <h2>排班管理</h2>
                <table>
                    <thead>
                        <tr>
                            <th>医生名称</th>
                            <th>坐诊科室</th>
                            <th>排班日</th>
                            <th>值班时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-if="schedulelist==0">
                            <td colspan="6"><label style="color: grey;">暂时没有排班信息！</label> </td>
                        </tr>
                        <tr v-for="schedule in schedulelist">
                            <td>{{schedule.doctorName}}</td>
                            <td>{{schedule.deptName}}</td>
                            <td>{{schedule.scheduleWeek}}</td>
                            <td>{{ formatTime(new Date(schedule.startTime)) }} ------- {{ formatTime(new
                                Date(schedule.endTime)) }}</td>
                            <td>
                                <button class="btn">编辑</button>
                                <button class="btn btn-danger">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div id="departments" class="content-section">
                <h2>科室管理</h2>
                <table>
                    <thead>
                        <tr>
                            <th>科室编号</th>
                            <th>科室名称</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-if="departmentlist==0">
                            <td colspan="2">
                                <label style="color: grey;">暂无科室信息</label>
                            </td>
                        </tr>
                        <tr v-for="dept in departmentlist">
                            <td>{{dept.dept_id}}</td>
                            <td>{{dept.dept_name}}</td>
                            <td>
                                <button class="btn">编辑</button>
                                <button class="btn btn-danger">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div id="equipment" class="content-section">
                <h2>设备管理</h2>
                <div class="action-bar" style="margin-bottom: 20px;">
                    <button class="btn" onclick="showAddEquipmentForm()">添加新设备</button>
                </div>

                <!-- 添加/编辑设备的表单 -->
                <div id="equipmentForm"
                    style="display: none; margin-bottom: 20px; padding: 15px; border: 1px solid #ddd; border-radius: 4px;">
                    <h3 id="formTitle">添加新设备</h3>
                    <div class="form-group">
                        <label>设备ID：</label>
                        <input type="text" id="equipmentId" class="form-input">
                    </div>
                    <div class="form-group">
                        <label>设备名称：</label>
                        <input type="text" id="equipmentName" class="form-input">
                    </div>
                    <div class="form-group">
                        <label>所属科室：</label>
                        <select id="equipmentDepartment" class="form-input">
                            <option value="放射科">放射科</option>
                            <option value="检验科">检验科</option>
                            <option value="内科">内科</option>
                            <option value="外科">外科</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>设备状态：</label>
                        <select id="equipmentStatus" class="form-input">
                            <option value="正常">正常</option>
                            <option value="维护中">维护中</option>
                            <option value="故障">故障</option>
                            <option value="报废">报废</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>备注信息：</label>
                        <textarea id="equipmentNotes" class="form-input" rows="3"></textarea>
                    </div>
                    <div class="form-actions">
                        <button class="btn" onclick="saveEquipment()">保存</button>
                        <button class="btn btn-secondary" onclick="cancelEdit()">取消</button>
                    </div>
                </div>

                <div id="device_table_info">
                    <table>
                        <thead>
                            <tr>
                                <th>设备ID</th>
                                <th>设备名称</th>
                                <th>设备科室</th>
                                <th>设备状态</th>
                                <th>备注信息</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="equipmentTableBody">
                            <tr v-if="devicementlist==0">
                                <td colspan="6">
                                    <label style="color: grey;">暂时没有设备信息！</label>
                                </td>

                            </tr>
                            <tr v-for=" device in devicementlist">
                                <td>{{device.deviceId}}</td>
                                <td>{{device.deviceName}}</td>
                                <td>{{device.deptId}}</td>
                                <td>{{device.deviceState}}</td>
                                <td>{{device.deviceNotes}}</td>
                                <td>
                                    <button class="btn" onclick="editEquipment('E001')">编辑</button>
                                    <button class="btn btn-danger"
                                        onclick="confirmDeleteDevice(device.deviceId)">删除</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div id="appointments" class="content-section">
                <h2>挂号订单管理</h2>
                <table>
                    <thead>
                        <tr>
                            <th>门诊号</th>
                            <th>就诊日期</th>
                            <th>就诊科室</th>
                            <th>就诊医生</th>
                            <th>报告ID</th>
                            <th>医生备注</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-if="registementlist.length === 0">
                            <td colspan="7"><label style="color: grey;">暂时没有挂号信息</label></td>
                        </tr>
                        <tr v-for="registe in registementlist" :key="registe.registeId">
                            <td>{{ registe.registeId }}</td>
                            <td>{{ registe.registeDate }}</td>
                            <td>{{ registe.deptId }}</td>
                            <td>{{ registe.doctorId }}</td>
                            <td>{{ registe.patientId }}</td>
                            <td>{{ registe.registeNotes }}</td>
                            <td>
                                <button class="btn">查看</button>
                                <button class="btn btn-danger">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div id="reports" class="content-section">
                <h2>患者报告管理</h2>
                <table>
                    <thead>
                        <tr>
                            <th>报告数据ID</th>
                            <th>数据名称</th>
                            <th>数据值</th>
                            <th>上传设备ID</th>
                            <th>上传时间</th>
                            <th>挂号id</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-if="reportlist==0">
                            <td colspan="7"><label style="color: grey;">暂时没有报告信息</label>
                            </td>
                        </tr>
                        <tr v-for="report in reportlist">
                            <td>{{report.reportId}}</td>
                            <td>{{report.reportName}}</td>
                            <td>{{report.data}}</td>
                            <td>{{report.reportDevId}}</td>
                            <td>{{report.reportTime}}</td>
                            <td>{{report.registeId}}</td>
                            <td>
                                <button class="btn">查看</button>
                                <button class="btn btn-danger">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script src="/front_code/js/vue.js" type="text/javascript"></script>
    <script src="/front_code/js/jquery-3.6.0.min.js"></script>
    <script src="/front_code/js/管理端.js"></script>

    <script type="text/javascript">
        let vm = new Vue({
            el: "#device_table_info",
            data: {
                devicementlist: []
            },
            methods: {
                confirmDeleteDevice(deviceId) {
                    if (confirm('确定要删除该设备吗？')) {
                        this.deleteDevice(deviceId);
                    }
                },
                deleteDevice(deviceId) {
                    $.post('http://localhost:8080/device/deleteDevice', { deviceId }, (res) => {
                        if (res.code === 200) {
                            this.deviceList = this.deviceList.filter(device => device.deviceId !== deviceId);
                        } else {
                            alert('删除失败: ' + res.message);
                        }
                    }, 'json');
                }
            },
            created() {
                let url = "http://localhost:8080/device/getAllDevices";
                let params = null;
                $.get(url, params, (res) => {
                    console.log(res);
                    if (res.code === 200) {
                        this.devicementlist = res.data;
                    }
                }, "json");
            }
        });
    </script>

    <script type="text/javascript">
        let vm1 = new Vue({
            el: "#users",
            data: {
                adminlist: [],
                doctorlist: [],
                patientlist: []
            },
            methods: {
                confirmDeleteAdmin(adminId) {
                    if (confirm('确定要删除该管理员吗？')) {
                        this.deleteAdmin(adminId);
                    }
                },
                deleteAdmin(adminId) {
                    $.post('http://localhost:8080/admin/delete', { adminId }, (res) => {
                        if (res.code === 200) {
                            this.adminlist = this.adminlist.filter(admin => admin.adminId !== adminId);
                        } else {
                            alert('删除失败: ' + res.message);
                        }
                    }, 'json');
                },
                confirmDeleteDoctor(doctorId) {
                    if (confirm('确定要删除该医生吗？')) {
                        this.deleteDoctor(doctorId);
                    }
                },
                deleteDoctor(doctorId) {
                    $.post('http://localhost:8080/doctor/deleteById', { doctorId }, (res) => {
                        if (res.code === 200) {
                            this.doctorlist = this.doctorlist.filter(doctor => doctor.doctorId !== doctorId);
                        } else {
                            alert('删除失败: ' + res.message);
                        }
                    }, 'json');
                },
                confirmDeletePatient(patientId) {
                    if (confirm('确定要删除该患者吗？')) {
                        this.deletePatient(patientId);
                    }
                },
                deletePatient(patientId) {
                    $.post('http://localhost:8080/patient/deleteById', { patientId }, (res) => {
                        if (res.code === 200) {
                            this.patientlist = this.patientlist.filter(patient => patient.patientId !== patientId);
                        } else {
                            alert('删除失败: ' + res.message);
                        }
                    }, 'json');
                }
            },
            created() {
                let adminUrl = "http://localhost:8080/admin/getAll";
                $.get(adminUrl, null, (res) => {
                    console.log(res);
                    if (res.code === 200) {
                        this.adminlist = res.data;
                    }
                }, "json");

                let doctorUrl = "http://localhost:8080/doctor/getAll";
                $.get(doctorUrl, null, (res) => {
                    console.log(res);
                    if (res.code === 200) {
                        this.doctorlist = res.data;
                    }
                }, "json");
                let patientUrl = "http://localhost:8080/patient/getAllPatients";
                $.get(patientUrl, null, (res) => {
                    console.log(res);
                    if (res.code === 200) {
                        this.patientlist = res.data;
                    }
                })
            }
        });
    </script>
    <script type="text/javascript">
        let sc = new Vue({
            el: "#reports",
            data: {
                reportlist: []
            },
            created() {
                let url = "http://localhost:8080/report/getAll";
                let params = null;
                $.get(url, params, (res) => {
                    console.log(res);
                    if (res.code == 200) {
                        this.reportlist = res.data;
                    }
                }, "json");
            }
        });
    </script>
    <script type="text/javascript">
        let dept = new Vue({
            el: "#departments",
            data: {
                departmentlist: []
            },
            created() {
                let url = "http://localhost:8080/dept/getAll";
                let params = null;
                $.get(url, params, (res) => {
                    console.log(res);
                    if (res.code == 200) {
                        this.departmentlist = res.data;
                    }
                }, "json");
            }
        });
    </script>

    <script type="text/javascript">
        let vm2 = new Vue({
            el: "#schedule",
            data: {
                schedulelist: []
            },
            created() {
                let url = "http://localhost:8080/user/schedule";
                let params = null;
                $.get(url, params, (res) => {
                    console.log(res);
                    if (res.code == 200) {
                        this.schedulelist = res.data;
                    }
                }, "json");
            },
            methods: {
                formatTime(date) {
                    const year = date.getFullYear();
                    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1
                    const day = String(date.getDate()).padStart(2, '0');
                    const hours = String(date.getHours()).padStart(2, '0');
                    const minutes = String(date.getMinutes()).padStart(2, '0');
                    const seconds = String(date.getSeconds()).padStart(2, '0');
                    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                }
            }
        });
    </script>
    <script type="text/javascript">
        let rg = new Vue({
            el: "#appointments",
            data: {
                registementlist: []
            },
            created() {
                let url = "http://localhost:8080/admin/getregistAll";
                $.get(url, null, (res) => {
                    console.log(res);
                    if (res.code === 200) {
                        this.registementlist = res.data;
                    }
                }, "json");
            }
        });
    </script>

    <script type="text/javascript">
        function logout() {
            window.location.href = '登录界面.html';
        }
    </script>


</body>

</html>